import React from 'react';
import { Row, Col, Form, Input, Button, Spin, Table, Select, Popconfirm } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../../utils';
import { DEFAULT_PAGE_SIZE } from '../../../utils/constants';
import styles from '../../common.css';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

@Form.create()
class SprintAnalysisTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
      modalVisible: false, // 定义是否显示新增/编辑弹窗页面
      selectedRowKeys: [],
    };
  }
  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      // console.log(data);
      dispatch({ // 调用接口，请求数据
        type: 'analysis/fetchSprintAnalysis', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          params: data,
        },
      });
    });
  };

  render() {
    const { dispatch, loading, sprintAnalysis, form: { getFieldDecorator } } = this.props;
    // 定义表头字段及取值内容
    const columns = [
      {
        title: '分析ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: 'sprintID',
        dataIndex: 'sprint_id',
        key: 'sprint_id',
      },
      {
        title: '项目名称',
        dataIndex: 'project_name',
        key: 'project_name',
      },
      {
        title: '插入需求',
        dataIndex: 'insertstoryCount',
        key: 'insertstoryCount',
      },
      {
        title: '延期需求',
        dataIndex: 'delaystoryCount',
        key: 'delaystoryCount',
      },
      {
        title: '计划需求数',
        dataIndex: 'planCount',
        key: 'planCount',
      },
      {
        title: '实际需求数',
        dataIndex: 'actualCount',
        key: 'actualCount',
      },
      {
        title: '实际未完成需求数',
        dataIndex: 'unfinishstoryCount',
        key: 'unfinishstoryCount',
      },
      {
        title: '实际已完成需求数',
        dataIndex: 'finishstoryCount',
        key: 'finishstoryCount',
      },
    ];
    // const modalProps = {
    //   dispatch,
    //   loading,
    //   visible: this.state.modalVisible,
    //   currentUser: this.state.currentRecord,
    //   onCancel: () => {
    //     this.setState({
    //       currentRecord: {},
    //       modalVisible: false,
    //     });
    //   },
    // };
    return (
      <div>
        <Form>
          <Row gutter={12}>
            <Col span={8}>
              <FormItem
                label="SprintID"
                {...formItemLayout}
              >
                {getFieldDecorator('sprint_id', {
                  initialValue: '',
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem
                label="项目名称"
                {...formItemLayout}
              >
                {getFieldDecorator('project_name', {
                  initialValue: '',
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={8}>
              <Button
                type="primary"
                loading={loading}
                onClick={this.handleSearch}
              >
                查询
              </Button>
            </Col>
          </Row>
          <Table
            columns={columns}
            dataSource={sprintAnalysis}
            loading={loading}
            rowKey={record => record.id}
            pagination={{
              pageSize: DEFAULT_PAGE_SIZE,
            }}
            bordered
          />
        </Form>
      </div>
    );
  }
}

export default SprintAnalysisTable;
